<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>select层级联动选择组件 CascadeSelect - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="select层级联动选择组件，通过select的附加属性实现的下拉选择,异步加载数据，支持有父子关系的多层联动。
注意select上增加的属性字段：url标识当前数据源，child表示子级元素，childDataPath表示子级数据源，
有问题，联系QQ：340114173"> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="/"> <img src="/static/images/layui/logo.png" alt="layui"> </a>
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="/">框架</a> </li>
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="/alone.html" target="_blank">独立组件</a>
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>select层级联动选择组件</a> <span class="layui-badge layui-bg-green layui-hide-xs">CascadeSelect</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/1152312/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">长河</cite> <img src="/qqapp/101235792/221525CD1BE8473F530D253BAF2212EA/100" alt="长河"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>select层级联动选择组件，通过select的附加属性实现的下拉选择,异步加载数据，支持有父子关系的多层联动。 注意select上增加的属性字段：url标识当前数据源，child表示子级元素，childDataPath表示子级数据源， 有问题，联系QQ：340114173</p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">更新：2018-12-27 </span> <span class="layui-inline">创建：2018-12-12 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text"> 
       <img src="/upload/2018_12/1152312_1544182796562_45538.png"> 
       <br>
       <br>组件的JS代码如下
       <br>
       <pre>/***<br> * 无限极联动选择组件封装模块<br> */<br>layui.define(['jquery', 'form'], function (exports) {<br>    var $ = layui.$, form = layui.form;<br>    // 监听选中事件<br>    form.on('select', function (data) {<br>        var id = data.value;<br>        var obj = data.elem.name;<br>        var _this = $("select[name='" + obj + "']");<br>        var child = _this.attr("child");<br>        var childUrl = $("select[name='" + obj + "']").attr("childDataPath");<br>        if ($("select[name='" + child + "']").length &gt; 0) {<br>            CascadeSelect.GetListByParent(child, id, childUrl, true);<br>        }<br>    });<br><br>    var CascadeSelect = {<br>        init: function (initObj, isReset) {<br>            var url = $("select[name='" + initObj + "']").attr("url");<br>            // ajax请求<br>            $.get(url, function (data) {<br>                $.each(data, function (i, d) {<br>                    $("select[name='" + initObj + "']").append(<br>                        "&lt;option value='" + d.value + "'&gt;" + d.key + "&lt;/option&gt;");<br>                });<br>                form.render();<br>                var selectValue = $("select[name='" + initObj + "']").attr("selectValue");<br>                var child = $("select[name='" + initObj + "']").attr("child");<br>                $("select[name='" + initObj + "']").val(selectValue);<br>                var childUrl = $("select[name='" + initObj + "']").attr("childDataPath");<br>                if (childUrl) {<br>                    CascadeSelect.GetListByParent(child, selectValue, childUrl, isReset);<br>                }<br>            }, 'json');<br>        },<br>        GetListByParent: function (obj, id, childUrl, isReset) {<br>            // 先清空下拉框<br>            var _this = $("select[name='" + obj + "']");<br>            _this.empty();<br>            _this.append("&lt;option value=''&gt;" + _this.attr("promtion") + "&lt;/option&gt;");<br>            var child = _this.attr("child");<br>            var _thischild = $("select[name='" + child + "']");<br>            var selectValue = "";<br>            if (id !== "") {<br>                $.ajax({<br>                    type: "POST",<br>                    url: childUrl,<br>                    dataType: "json",<br>                    data: { id: id },<br>                    async: false,<br>                    success: function (data) {<br>                        if (data.length &gt; 0) {<br>                            $.each(data, function (i, d) {<br>                                _this.append("&lt;option value='" + d.value + "'&gt;" + d.key + "&lt;/option&gt;");<br>                            });<br>                            if (!isReset) {<br>                                selectValue = _this.attr("selectValue");<br>                                _this.val(selectValue);<br>                            }<br>                            if (_thischild.length &gt; 0) {<br>                                childUrl = _this.attr("childDataPath");<br>                                CascadeSelect.GetListByParent(child, selectValue, childUrl, isReset);<br>                            }<br>                        }<br>                        form.render();<br>                    },<br>                    error: function (XMLHttpRequest, textStatus, errorThrown) {<br>                        layer.msg('系统异常导致操作失败, 请联系管理员。', { icon: 5, shift: 6 });<br>                    },<br>                    statusCode: {<br>                        404: function () {<br>                            layer.msg('未找到指定请求，请检查访问路径！', { icon: 5, shift: 6 });<br>                        },<br>                        500: function () {<br>                            layer.msg('系统错误，请联系管理员。', { icon: 5, shift: 6 });<br>                        }<br>                    },<br>                    complete: function (XMLHttpRequest, textStatus) {<br>                    }<br>                });<br><br>            } else {<br>                while (_thischild.length &gt; 0) {<br>                    _thischild.empty();<br>                    _thischild.append("&lt;option value=''&gt;" + _thischild.attr("promtion") + "&lt;/option&gt;");<br>                    _thischild = $("select[name='" + _thischild.attr("child") + "']");<br>                }<br>                form.render();<br>            }<br>        }<br>    };<br><br>    exports('cascadeSelect', CascadeSelect);<br>});</pre>页面元素，注意select上增加的属性字段，url标识当前数据源，child表示子级元素，childDataPath表示子级数据源
       <br>
       <pre>   &lt;div class="layui-form-item"&gt;<br>                            &lt;label class="layui-form-label text-r"&gt;行政区域：&lt;/label&gt;<br>                            &lt;div class="layui-inline"&gt;<br>                                &lt;select class="select" name="ProvinceId" url="/Admin/Area/GetListByParent?id=86" child="CityId" childDataPath="/Admin/Area/GetListByParent" selectValue="310000" promtion="请选择省"&gt;<br>                                    &lt;option value=""&gt;请选择省&lt;/option&gt;<br>                                &lt;/select&gt;<br>                            &lt;/div&gt;<br>                            &lt;div class="layui-inline"&gt;<br>                                &lt;select class="select" name="CityId" child="DistrictId" childDataPath="/Admin/Area/GetListByParent" selectValue="310100" promtion="请选择市"&gt;<br>                                    &lt;option value=""&gt;请选择市&lt;/option&gt;<br>                                &lt;/select&gt;<br>                            &lt;/div&gt;<br>                            &lt;div class="layui-inline"&gt;<br>                                &lt;select class="select" name="DistrictId" child="StreetId" childDataPath="/Admin/Area/GetListByParent" selectValue="310118" promtion="请选择县/区"&gt;<br>                                    &lt;option value=""&gt;请选择县/区&lt;/option&gt;<br>                                &lt;/select&gt;<br>                            &lt;/div&gt;<br>                            &lt;div class="layui-inline"&gt;<br>                                &lt;select class="select" name="StreetId" selectValue="" promtion="请选择乡镇/街道"&gt;<br>                                    &lt;option value=""&gt;请选择乡镇/街道&lt;/option&gt;<br>                                &lt;/select&gt;<br>                            &lt;/div&gt;<br>                        &lt;/div&gt;</pre>使用方式：
       <br>
       <br>
       <pre> layui.config({<br>            base: '/layuiadmin/' //静态资源所在路径<br>        }).extend({<br>            index: 'lib/index' //主入口模块<br>            , cascadeSelect: '{/}/layuiadmin/layui/layui_exts/cascadeSelect/cascadeSelect'  //  {/}的意思即代表采用自有路径，即不跟随 base 路径<br>            }).use(['index', 'form', 'laydate','cascadeSelect'], function () {<br>            var $ = layui.$<br>                , admin = layui.admin<br>                , element = layui.element<br>                , layer = layui.layer<br>                , laydate = layui.laydate<br>                , cascadeSelect = layui.cascadeSelect<br>                , form = layui.form;<br>                form.render(null, 'component-form-group');<br><br>                cascadeSelect.init('ProvinceId', false);<br><br>}</pre>AJAX数据返回格式，需要自己实现，按照父子关系的查询逻辑，省级数据返回参考
       <br>
       <pre>[{<br>	"key": "北京",<br>	"value": "110000"<br>}, {<br>	"key": "天津",<br>	"value": "120000"<br>}, {<br>	"key": "河北省",<br>	"value": "130000"<br>}, {<br>	"key": "山西省",<br>	"value": "140000"<br>}, {<br>	"key": "内蒙古自治区",<br>	"value": "150000"<br>}, {<br>	"key": "辽宁省",<br>	"value": "210000"<br>}, {<br>	"key": "吉林省",<br>	"value": "220000"<br>}, {<br>	"key": "黑龙江省",<br>	"value": "230000"<br>}, {<br>	"key": "上海",<br>	"value": "310000"<br>}, {<br>	"key": "江苏省",<br>	"value": "320000"<br>}, {<br>	"key": "浙江省",<br>	"value": "330000"<br>}, {<br>	"key": "安徽省",<br>	"value": "340000"<br>}, {<br>	"key": "福建省",<br>	"value": "350000"<br>}, {<br>	"key": "江西省",<br>	"value": "360000"<br>}, {<br>	"key": "山东省",<br>	"value": "370000"<br>}, {<br>	"key": "河南省",<br>	"value": "410000"<br>}, {<br>	"key": "湖北省",<br>	"value": "420000"<br>}, {<br>	"key": "湖南省",<br>	"value": "430000"<br>}, {<br>	"key": "广东省",<br>	"value": "440000"<br>}, {<br>	"key": "广西壮族自治区",<br>	"value": "450000"<br>}, {<br>	"key": "海南省",<br>	"value": "460000"<br>}, {<br>	"key": "重庆",<br>	"value": "500000"<br>}, {<br>	"key": "四川省",<br>	"value": "510000"<br>}, {<br>	"key": "贵州省",<br>	"value": "520000"<br>}, {<br>	"key": "云南省",<br>	"value": "530000"<br>}, {<br>	"key": "西藏自治区",<br>	"value": "540000"<br>}, {<br>	"key": "陕西省",<br>	"value": "610000"<br>}, {<br>	"key": "甘肃省",<br>	"value": "620000"<br>}, {<br>	"key": "青海省",<br>	"value": "630000"<br>}, {<br>	"key": "宁夏回族自治区",<br>	"value": "640000"<br>}, {<br>	"key": "新疆维吾尔自治区",<br>	"value": "650000"<br>}, {<br>	"key": "香港特别行政区",<br>	"value": "810000"<br>}, {<br>	"key": "澳门特别行政区",<br>	"value": "820000"<br>}, {<br>	"key": "台湾省",<br>	"value": "710000"<br>}]</pre> 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="//cdn.layui.com/extend/1152312_1545879058475_1187.rar" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> <a href="https://gitee.com/jinhuoyan/codes/78tzquho2drl4myb9enx342" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary layui-border-red"> 去码云下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>